<script setup lang="ts">
import { ref, computed } from "vue";
import { formRules } from "../utils/rule";
import { FormProps } from "../utils/types";
import { TreeTransfer } from "@/components/TreeTransfer";
import { getKeyList } from "@pureadmin/utils";
import { DictSelect } from "@/components/common/DictSelect";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: "",
    ruleType: 1,
    ruleName: "",
    categoryId: undefined,
    stockVisible: 1,
    storeIds: [],
    dataAll: [],
    storeList: [],
    parentList: [],
    goodsType: 1
  })
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}

const defaultProps = ref({
  children: "children",
  label: "storeName"
});

const checkedIds = ref([]);
const titles = ref(["全部", "全部"]);
//改变选中项
const changeChecked = val => {
  newFormInline.value.storeIds = val;
  console.log("选中项：", val);
};

if (newFormInline.value.storeList && newFormInline.value.storeList.length > 0) {
  checkedIds.value = getKeyList(newFormInline.value.storeList, "id");
}

const cateList = computed(() => {
  let goodsType = newFormInline.value.goodsType;
  if (goodsType == 3) {
    return [];
  }
  let filterId = newFormInline.value.goodsType == 1 ? 19 : 23;
  return newFormInline.value.parentList.filter(v => v.id == filterId);
});

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :rules="formRules"
    :model="newFormInline"
    label-width="100px"
  >
    <el-row>
      <el-col :span="20" class="m-auto">
        <el-form-item label="配置名称" prop="ruleName">
          <el-input
            v-model="newFormInline.ruleName"
            clearable
            placeholder="请输入配置名称"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="20" class="m-auto">
        <el-form-item label="商品类型" prop="goodsType">
          <!-- <DictSelect
            v-model="newFormInline.goodsType"
            dict-type="PRODUCT_TYPE"
            clearable
          /> -->
          <!-- 商品类型 1抓机商品 2兑换礼品 -->
          <el-select
            v-model="newFormInline.goodsType"
            placeholder="请选择"
            @change="newFormInline.categoryId = undefined"
          >
            <el-option label="抓机商品" :value="1" />
            <el-option label="兑换礼品" :value="2" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="20" class="m-auto">
        <el-form-item label="商品类目" prop="categoryId">
          <el-tree-select
            v-model="newFormInline.categoryId"
            :data="cateList"
            default-expand-all
            filterable
            node-key="id"
            :default-expanded-keys="[19, 23]"
            :render-after-expand="false"
            :props="{ children: 'children', label: 'categoryName' }"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="20" class="m-auto">
        <el-form-item label="库存可见" prop="stockVisible">
          <el-switch
            v-model="newFormInline.stockVisible"
            :active-value="1"
            :inactive-value="0"
            inline-prompt
            active-text="可见"
            inactive-text="不可见"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="20" class="m-auto">
        <el-form-item label="绑定门店" prop="dataAll">
          <TreeTransfer
            :dataAll="newFormInline.dataAll"
            :checkedIds="checkedIds"
            :titles="titles"
            :defaultProps="defaultProps"
            @changeChecked="changeChecked"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<style scoped lang="scss">
.asdxsad {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  transition: var(--el-transition-duration-fast);
  text-align: center;
}
.avatar {
  width: 150px;
  height: 150px;
}
</style>
